<template>
  <div class="header">
    <!--    背景高斯-->
    <div style="height: 4.2rem;overflow: hidden;position: absolute;z-index: -999;width: 100%">
      <img :src="Songinfo.coverImgUrl" alt="" style="width: 100%;height: 100%;filter: blur(1rem);">
    </div>
    <!--  上部按钮 固定·-->
    <div class="flexHead">
      <div style="display: flex;align-items: center">
        <svg class="icon" aria-hidden="true" style="color: white;font-size: 0.6rem" @click="$router.go(-1)">
          <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <span style="font-size: 0.24rem;color: white;letter-spacing: 0.1rem;padding-left: 0.1rem">官方动态歌单</span>
      </div>
      <svg class="icon" aria-hidden="true" style="font-size: 0.5rem;color: white">
        <use xlink:href="#icon-sangedian"></use>
      </svg>
    </div>
    <!--    歌单介绍-->
    <div class="Introduce">
      <div>
        <img :src="Songinfo.coverImgUrl" alt="" class="Cover">
      </div>
      <div class="IntroduceInfo">
        <div style="font-size: 0.25rem;letter-spacing: 0.05rem;color: rgb(255,255,255,0.8)">{{Songinfo.name}}</div>
        <div style="display: flex;align-items: center">
          <img :src="userInfo.avatarUrl" alt="" style="width: 0.5rem;height: 0.5rem;border-radius: 50%">
          <div style="padding-left: 0.1rem;color: rgb(255,255,255,0.6)">{{userInfo.nickname||""}}</div>
        </div>
      </div>
    </div>
    <!-- 分享评论等-->
    <div style="display: inline-block" class="Action-box">
      <div class="Action">
        <div class="nav">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tianjia"></use>
          </svg>
          <div class="number">{{Songinfo.subscribedCount}}</div>
        </div>
        <div class="nav">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-pinglun"></use>
          </svg>
          <div class="number">{{Songinfo.trackCount}}</div>
        </div>
        <div class="nav" style="border-right: none">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fenxiang2"></use>
          </svg>
          <div class="number">110万</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {onMounted, reactive} from "vue";
export default {
  name: "PlaylistHeader",
  props: ['Songinfo','userInfo'],
  setup(props) {

  }
}
</script>
<style scoped>
.header {
  /*background: url("/public/img/swiper2.jpg");*/
  height: 4.2rem;
  border-bottom-left-radius: 8%;
  border-bottom-right-radius: 8%;
  position: relative;
  /*filter:blur(0.1rem);*/
  /*display: flex;*/
  /*justify-content: center;*/
}

.Action {
  background-color: white;
  display: flex;
  height: 0.5rem;
  align-items: center;
  border-radius: 0.35rem;
  box-shadow: 5px 5px 33px #989898,
  -5px -5px 33px #ffffff;
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
}

.number {
  font-size: 0.16rem;
  padding-left: 0.05rem;
}

.nav {
  display: flex;
  align-items: center;
  border-right: 0.01rem solid rgb(0, 0, 0, 0.5);
  padding-right: 0.1rem;
  padding-left: 0.1rem;
}

.nav .icon {
  font-size: 0.3rem;
}

.flexHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(0, 0, 0, 0.4);
  height: 0.8rem;
  position: fixed;
  width: 100%;
  top: 0
}

.Cover {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.2rem;
}

.Introduce {
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  padding-top: 0.9rem;
}

.IntroduceInfo {
  font-size: 0.16rem;
  width: 4rem;
  height: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 0.2rem;
  color: white;
}
</style>